<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link href="GangnamStyle.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.8.1.min.js"></script>
<script src="login.js"></script>
<title>Table</title>
<script>

$(document).ready(function(){
	
	if(!(getUsername()== null || getUsername() == "null")){
		storageLogin();
	}
	
	window.setInterval(refresh, 1000);
});
		
function refresh(){
	$.getJSON('http://localhost:8080/Roulette/rest/table/' + getTableId(), function(data){
		var players = data['players'];
		var tableString = "<tr><th width='100px'>Player name</th><th width='100px'>Stack</th><th width='100px'>Bet</th></tr>";
		for(i = 0; i<players.length; i++){
			tableString += "<tr><td>" + players[i].username + "</td><td>" + players[i].cashBuyIn + "</td>" + "<td>" + players[i].bet + "</td></tr>" 
		}
		$('#playerTable').html(tableString);
	});
}

function getTableId(){
	var id = getVar('id');
	return id;
}

function leaveTable(){
	$.ajax({
		type: 'DELETE',
		url: 'http://localhost:8080/Roulette/rest/table/' + getTableId() + "/" + getId(),
		dataType: 'json',
		contentType: 'application/json; charset=utf-8',
		success: function (result) {
			window.location = "lobby.html";
		},
		error: function(result, ajaxOptions, thrownError) {
			alert("Errormessage: " + result.status);
			alert(thrownError);
		}
	});
}


function storageLogin()
{
	$.getJSON('http://localhost:8080/Roulette/rest/lobby/login?username=' + getUsername() + "&password=" + getPassword(), function(data) {
		var username = data['username'];
		var cash = data['cashTotal'];
		if(username && cash != null){
			buildLoggedOn(username, cash);
			$('#login').hide();
			$('#loggedOn').show();
		} else {
			alert('Failed to log in, please try again');
		}
});
	
}
function logout(){
	clearLogin();
	$('#loggedOn').hide();
	$('#login').show();
	$('#goToTableButton').hide();
}


function buildLoggedOn(username, cash){
	var loggedOnText = "Username: " + username + "<br/>Cash: " + cash;
	$('#loggedOn').html(loggedOnText);
}

function getVar(name)
{
get_string = document.location.search;         
return_value = '';

do { //This loop is made to catch all instances of any get variable.
   name_index = get_string.indexOf(name + '=');
   
   if(name_index != -1)
     {
     get_string = get_string.substr(name_index + name.length + 1, get_string.length - name_index);
     
     end_of_value = get_string.indexOf('&');
     if(end_of_value != -1)                
       value = get_string.substr(0, end_of_value);                
     else                
       value = get_string;                
       
     if(return_value == '' || value == '')
        return_value += value;
     else
        return_value += ', ' + value;
     }
   } while(name_index != -1)
   
//Restores all the blank spaces.
space = return_value.indexOf('+');
while(space != -1)
     { 
     return_value = return_value.substr(0, space) + ' ' + 
     return_value.substr(space + 1, return_value.length);
                                                
     space = return_value.indexOf('+');
     }
 
return(return_value);        
}


function klik(event){
	pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("tablePic").offsetLeft;
	pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("tablePic").offsetTop;
	//alert(pos_x + ", " + pos_y);
	//370  414, 278 306 , 457
	var jsonObject = new Object();
		jsonObject['playerId'] = getId(); // TODO
		jsonObject['amount'] = 10.0; // TODO
	if(pos_x > 370 && pos_x < 414 && pos_y > 278 && pos_y < 306) //zwart
	{
		jsonObject['black'] = true;
	}
	else if(pos_x > 413 && pos_x < 457 && pos_y > 278 && pos_y < 306) //rood
	{
		jsonObject['black'] = false;
	} else {
		return;
	}
	var jsonString = JSON.stringify(jsonObject);
	
	$.ajax({
		type: 'POST',
		url: 'http://localhost:8080/Roulette/rest/table/' + getTableId(),
		dataType: 'json',
		contentType: 'application/json; charset=utf-8',
		data: jsonString,
		success: function (result) {
		},
		error: function(result, ajaxOptions, thrownError) {
			alert("Errormessage: " + result.status);
			alert(thrownError);
		}
	});
	
}

</script>

</head>
<body id="body">

	<header>
	<div>Table</div>
	
			<div id="loggedOn" style="display:none"></div>
	</header>
	<div id="picDiv">
		<div id="image">
			<img id="tablePic" onclick="klik(event)" src="pics/roulette-table-layout.jpg"/>
		</div>
		<div id="playerTable">
			<table>
				
			</table>
		</div>
		<button onclick="leaveTable()">Leave the table</button>
	</div>
	<div id="info">
		
	</div>
</body>
</html>